<script>

<!-- Tab -->
  $(function() {
	$("select").select2();
    	$( "#tabsyv" ).tabs();
  });
  
<!-- Effect -->

 $(function() {
    // run the currently selected effect
    function runEffect(el) {
      // get effect type from
	  var options = {};
     /* 
      var selectedEffect = $( ".effectTypes" ).val();
 	
      // most effect types need no options passed by default
      
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 0 };
      } else if ( selectedEffect === "transfer" ) {
        options = { to: ".effecttoggleyv", className: "ui-effects-transfer" };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
      
     */
	
	    // run the effect
      el.effect( "", options, 300);
    };
 
    // callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( ".effectyv" ).removeAttr( "style" ).hide().fadeIn();
      }, 100 );
    };
 
    // set effect from select menu value
    $( ".effecttoggleyv" ).click(function() {
      var href = $(this).attr("href");
	  var el = $(href);
	  runEffect(el);
      return false;
    });
  });
  
  </script>
<body>
<script type="text/javascript" src="<?php echo base_url('skin/js/globestore.js'); ?>"></script>	
	
	<div id="phoneGallery" >
    
    <div class="galleryRight"></div>
    	
    	<div class="wizard posRel">
            <a href="<?php  echo site_url('gallery'); ?>" class="current done">
            <span class="wiz1"></span>
                 <p>Pick a gadget</p>
            </a>
            <a href="<?php  echo site_url('promo'); ?>" class="current done">
             <span class="wiz2"></span>
                 <p>Choose your promo</p>
            </a>
            <a href="<?php  echo site_url('prepaid'); ?>" class="current done">
             <span class="wiz3"></span>
                 <p class="abs">Enter your <br>mobile number</p>
            </a>
            <a href="<?php  echo site_url('userprofile'); ?>" class="current done">
             <span class="wiz4"></span>
                 <p>Complete your profile</p>
            </a>
            <a href="<?php  echo site_url('globestore'); ?>" class="width100 current">
             <span class="wiz5"></span>
                 <p class="absd">Select your <br>preferred Globe Store <br>branch for handset <br>pickup</p>
            </a>
        </div>
        
        <div class="mobileHeader">
            <h5 class="hidden textBlue">Select your device</h5>
            <h5 class="hidden textBlue">Choose your promo</h5>
            <h5 class="hidden textBlue">Input your mobile number</h5>
            <h5 class="hidden textBlue">Complete your profile</h5>
            <h5 class="textBlue">Select your preferred Globe Store branch for handset pickup	</h5>
        </div>
    
    
    <div class="clear"></div>
        
    <div class="width960c zindfb4 posRel">
    
    	<div class="deviceInfosIns marg40 floatLeft">
                		<div  class="deviceBox active">
                        	<p><b>Gadget:</b><p>
                            <p><?php if(isset($_COOKIE['gadget'])) echo $_COOKIE['gadget']; ?> - P<?php if(isset($_COOKIE['price'])) echo $_COOKIE['price']; ?></p>
                        </div>
                 
                		<div class="promoBox active">
                        	<p><b>Promo:</b><p>
                            <p><?php if(isset($_COOKIE['promo'])) echo $_COOKIE['promo']; ?></p>
                        </div>
                        
                        <div class="commitmentBox active">
                       	    <p><b>Registration Period </br> and Savings:</b><p>
                            <p><?php if(isset($_COOKIE['commitmentBox'])) echo $_COOKIE['commitmentBox']; ?></p>
                        </div>
                        
                        <div class="prepaidBox active">
                        	<p><b>Mobile Number:</b><p>
                          <p><?php if(isset($_COOKIE['mobtel'])) echo $_COOKIE['mobtel']; ?></p>
                        </div>
                        
                        <div class="profileBox active">
                        	<p><b>Profile:</b><p>
                           	<p><span id="name"><?php if(isset($_COOKIE['username'])) echo $_COOKIE['username']; ?></span></p>
                           	<p>Email Address:<br><span id="email"><?php if(isset($_COOKIE['eadd'])) echo $_COOKIE['eadd']; ?></span></p>
                           	<p>Date of Birth:<br><span id="dob"><?php if(isset($_COOKIE['bday'])) echo $_COOKIE['bday']; ?></span></p>
                           	<p>Home Address:<br><span id="add" ><?php if(isset($_COOKIE['address'])) echo $_COOKIE['address']; ?></span>
                                <!--  temporary city values for globestore map  -->
                                
                                <span id="city" class="hiding"><?php  if(isset($_COOKIE['town'])) echo $_COOKIE['town'];  ?> </span> 
                                <span id="area" class="hiding"> <?php if(isset($_COOKIE['area'])) echo $_COOKIE['area'];  ?> </span>
                                <span id="province" class="hiding"> <?php if(isset($_COOKIE['province'])) echo $_COOKIE['province']; ?> </span>
                            </p>
                        </div>
                        
                        <div class="storeBox">
                       		  <p><b>Globe Store Branch:</b><p>
                            <p id="globestore">None</p>
                        </div>    
            </div>            
            
            <div id="storeInfo" class="floatLeft boxRight ">
            
            	<div class="marg20Left">
                	<!-- Store title -->
                	<p class="header30 marg20" id="top">Store information</p>
                    
                    <p class="text16 floatLeft marg0">Choose a Globe Store branch where you can pick up your gadget.</p>
                     <div class="clear"></div>
                     
                     <!-- Buttons -->
                    <div class="storeinfobuttcontyv  margtopyv30 ">
                      <a href="#." id="btn_NearBr" class="buttonBlue storeinfobuttcontyv floatLeft margright15yv">Select a branch near you</a>
                      <a href="#." id="btn_PrefBr" class="buttonBlue storeinfobuttcontyv floatLeft">Select your preferred branch</a>
                      <div class="clear"></div>
                    </div>  
                </div>
                
                <div class="marg20Left storeinfoparticipatingyvhider">
                	<!-- Store title -->
               	  <p class="text14reg margtopyv30 margbot10yv"><b>Note:</b> Gadgets can be claimed at participating stores only.</p>
                     <div class="clear"></div>
                     
                     <select type="text" class="width215 marg10Top storeinfobranchlocyvHide">
                         <option>Metro Manila</option>
                         <option>North Luzon</option>
                         <option>Central Luzon</option>
                         <option>South Luzon</option>
                         <option>Visayas</option>
                         <option>Mindanao</option>
                     </select> 
					 
                  <div class="storeinfobranchlocontyv" style="display:none;">
                    <a class="storeinfobranchlocyv marg7allyv" href="#.">Metro Manila</a>
                    <a class="storeinfobranchlocyv marg7allyv" href="#.">North Luzon</a>
                    <a class="storeinfobranchlocyv marg7allyv" href="#.">Central Luzon</a>
				  <br>
					<a class="storeinfobranchlocyv marg7allyv" href="#.">South Luzon</a>
                    <a class="storeinfobranchlocyv marg7allyv" href="#.">Visayas</a>
                    <a class="storeinfobranchlocyv marg7allyv" href="#.">Mindanao</a>
                  </div>
                     <div class="clear"></div>
              </div>
                  
                <!-- Map Holder -->
              <div id="StoreGmap" class="storeinfogmapcontyv marg20Left margtopyv45 storeinfogmapcontyvhider">
                 <div class="storeinfogmapholdyv" id="nearmap"> <!-- <img src="../skin/images/Map Place.jpg" alt=""/> --></div>
          	  </div>
                
                
            	<div id="ListofBrtxt" class="marg20Left">
               	  <p class="font24yv margbot15yv margtopyv45 storeinfogmapcontlistyvhider">Select a Globe Store branch near you.</p>
              </div>
               	
                
                <!-- Store Infoholder-->
			  <div id="SelectedBr" class="marg20Left storeinfoliststoreinfoyv storeinfoliststoreinfoyvhider margtopyv30">
                <p class="font24yv marg0yv color282828"><b id="selectedstorename"></b></p>
                <p class="text14reg marg10yv" id="selectedstoreaddress"></p>
                <p class="text14reg marg0yv" id="selectedstorehourslabel"><b>Store hours:</b></p>
                <p class="text14reg marg0yv" id="selectedstorehours"></p>
        </div>
                 <!-- Buttons -->
           	  <div id="SummaryBtn" class="storeinfobuttcont2yv storeinfoliststoreinfoyvhider  margtopyv70 alignCenter">
                    <a href="<?php echo base_url('index.php/summary'); ?>" id="btn_OrderSumm" class="buttonBlue storeinfoviewordersumyv"><span class="topnega3yv posRel" id="ordersum">View order summary</a>
                    
                    <div class="clear"></div>
              </div>    

                <!-- Location Tabs-->
				<div id="ListofBr" class="marg20Left storeinfogmapcontlistyvhider">
              <div id="tabsyv">
  						<div class="floatRight">
                            <ul class="thefiltererar">
							               	<li id="arrowrightian" class="margleft7yv trianglearrowrightyv"></li>
    							            <li class="margleft7yv"><a class="effecttoggleyv" href="#tabsyv-1"></a></li>
                              <li id="arrowleftian" class="margleft7yv trianglearrowleftyv"></li>
							             </ul>
  						</div>
                      
  						<div class="clear"></div>
  						
						<div class="marg20topbotyv" id="storescontentlist">
							<div id="tabsyv-1" class="effectyv">
   							  <div class="storeinfolist11yv">
                                <a class="storeinfolist11listyv" href="#"></a>
                                <p class="text14reg"></p>
                              </div>
                               <div class="storeinfolist11yv2">
                                <a class="storeinfolist11listyv" href="#"></a>
                                <p class="text14reg"></p>
                              </div>
  							</div>
						</div>
						
						<div class="floatRight">
							<ul class="thefiltererar">
								<li id="arrowrightian" class="margleft7yv trianglearrowrightyv"></li>
    							<li class="margleft7yv"><a class="effecttoggleyv" href="#tabsyv-1"></a></li>
                                <li id="arrowleftian" class="margleft7yv trianglearrowleftyv"></li>
							</ul>
						</div>                    
					</div>
				</div>                             
                
                
               
            </div><!---BOX RIGHT END---> 
            
            <div class="clear"></div>
   	  <div class="marbot100yv"></div>    
      </div>
            

     
    
    
            
</div>